<template>
  <div class="leavedetail">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="请假人">
              <el-input
                v-model="form.nickName" size="mini"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="请假类型">
              <el-select v-model="form.id" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in holiList" 
                  :key="item.id"
                  :label="item.holiday.holidayType"
                  :value="item.holiday.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发起时间">
              <el-date-picker
                size="mini"
                v-model="dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search()">查询</el-button>
              <el-button type="primary" @click="Reset()">重置</el-button>
              <el-button
                type="warning"
                icon="el-icon-download"
                @click="handleExport"
                >导出</el-button
              >
            </el-form-item>
          </el-form>
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column prop="id" label="审批ID" width="120">
            </el-table-column>
            <el-table-column prop="tuser.nickName" label="请假人" width="120">
            </el-table-column>
            <el-table-column
              prop="holiday.holidayType"
              label="请假类型"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="duration" label="请假时长" width="120">
            </el-table-column>
            <el-table-column prop="startTime" label="发起时间" width="120">
            </el-table-column>
            <el-table-column prop="endTime" label="完成时间" width="120">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  :disabled="de"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "leavedetail",
  data() {
    return {
      //动态下拉列表框
      holiList: [],
    //   id:"",
      de: true,
      //分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      //日期
      dateRange: [],
      form: {
        id: "",
        nickName: "",
        holidayType: "",
        fatime: "",
        qiTime: "",
      },
      
    };
  },
  created() {
    
    this.searchholidayList();
    this.search();
  },
  methods: {
    //动态下拉列表框
  searchholidayList() {
      axios
      .post("http://localhost:8030/auditCenter/findOptions")
      .then((res) => {
        this.holiList = res.data;
      }).catch((error) => {
        console.error('获取部门列表失败:', error);
      });
    },

    //重置按钮
    Reset() {
     
      (this.form.nickName = ""),
        (this.form.holidayType = ""),
        (this.form.startTime = ""),
        (this.form.endTime = "");
      this.dateRange = [];
        this.search();
    },
    /** 导出按钮操作 */
    handleExport() {
      axios({
        url: "http://localhost:8030/auditCenter/export/excel",
        method: "GET",
        responseType: "arraybuffer", // 接收二进制文件流
      }).then((res) => {
        const content = res.data;
        const blob = new Blob([content], { type: "application/octet-stream" });
        const fileName = "export.xlsx";

        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(blob, fileName);
        } else {
          const fileUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.target = "_blank";
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    //复选框
    handleSelectionChange(e) {
      this.yilist = e.map((item) => item.id);
      //   console.log(this.yilist, 777);
      if (this.yilist.length == 1) {
        this.de = false;
      } else if (this.yilist.length > 1) {
        this.de = false;
      } else {
        this.de = true;
      }
    },
    //删除
    handleDelete(index, row) {
      this.$http
        .get("auditCenter/deleteTAuditByIds?id=" + row.id)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: "恭喜你，删除成功",
              type: "success",
            });
            this.search();
          } else {
            this.$message.error("错了哦，删除失败");
          }
        });
    },
    //条查 分页
    search() {
      if (this.dateRange.length == 0) {
        axios
          .post(
            "http://localhost:8030/auditCenter/findTAuditPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      } else {
        this.form.faTime = this.dateRange[0];
        this.form.qiTime = this.dateRange[1];
        axios
          .post(
            "http://localhost:8030/auditCenter/findTAuditPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      }
    },

    //分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
  },
};
</script>

<style scoped>
</style>